<template>
  <div class="shopdount-content">
    <div class="discountlistbox">
      <h1 class="dishr">我的店铺优惠券({{ dislist.length }})</h1>
      <div
        v-for="(item,index) in dislist"
        :key="index"
        class="disbox"
        @touchstart="gtouchstart(index)"
        @touchmove="gtouchmove()"
        @touchend="gtouchend()"
      >
        <div class="disleft">
          <p class="dismoney">￥{{ item.money }}</p>
          <p class="distotal">满{{ item.total }}元使用</p>
        </div>
        <div class="disright">
          <p class="distit" v-if="item.type == 2">通用券</p>
          <p class="distit" v-if="item.type == 1">满减券</p>
          <p
            class="distime"
          >有效期：{{ item.createtime?item.createtime.substr(0,10):null }} - {{ item.stopTime }}</p>
        </div>
      </div>
    </div>
    <div class="tit">
      长按优惠券可进行删除
    </div>
    <router-link to="shopdiscount">
      <div class="checkmydis">设置我的优惠券</div>
    </router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timeOutEvent: 0,
      dislist: []
    };
  },
  beforeCreate: function() {
    //创建前
  },
  activated(){
    this.Suk_getlist()
  },
  created: function() {
    this.Suk_getlist()
    //创建后
  },
  beforeMount: function() {
    //挂载前
  },
  mounted: function() {
    //挂载后
  },
  beforeUpdate: function() {
    //更新前
  },
  update: function() {
    //更新后
  },
  methods: {
    Suk_getlist() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      let Sukdata = {
        dining_id: localStorage.getItem("myshopid")
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/coupon/check", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if(res.data.meta.msg=='目前没有优惠劵'){
              that.$toast({
                message:'目前没有优惠劵'
              })
            }
            console.log(res.data, "123456789");
            if (res.data.meta.code == 200) {
              that.dislist = res.data.data;
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    // 长按介绍
    gtouchend() {
      let that = this;
      clearTimeout(that.timeOutEvent); //清除定时器
      if (that.timeOutEvent != 0) {
        //这里写要执行的内容（尤如onclick事件）
        // vm.goChat(item);
      }
      return false;
    },
    // 长按移动
    gtouchmove: function gtouchmove() {
      let that = this;
      clearTimeout(that.timeOutEvent); //清除定时器
      that.timeOutEvent = 0;
    },
    // 长按开始
    gtouchstart(index) {
      let that = this;
      that.timeOutEvent = setTimeout(function() {
        that.longPress(index);
      }, 500); //这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
      return false;
    },
    //  长按中的执行
    longPress(index) {
      this.timeOutEvent = 0;
      //执行长按要执行的内容，如弹出菜单
      let that = this;
      that.$dialog
        .confirm({
          title: "删除",
          message: "确定删除该条优惠券？"
        })
        .then(() => {
          let that = this;
          that.$toast.loading({
            message: "加载中..."
          });
          let Sukdata = {
            id: that.dislist[index].id
          };
          console.log(Sukdata);
          that.axios
            .post(that.baseUrl + "/coupon/delete", that.Qs.stringify(Sukdata), {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            })
            .then(function(res) {
              if (res.request.status === 200) {
                if (res.data.meta.code == 200) {
                  console.log(res.data);
                  that.Suk_getlist()
                  that.$toast.clear();
                } else if (res.data.meta.code == 501) {
                }
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.shopdount-content {
  font-size: 0.3rem;
}
.jiushibox {
  width: 90%;
  margin: 0 auto;
}
.payicon {
  width: 0.9rem;
  height: 0.9rem;
}
.payimgbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.payimgbox {
  display: inline-block;
  vertical-align: center;
}
.paytextbox {
  display: inline-block;
  vertical-align: center;
  margin-left: 0.3rem;
}
.paytext {
  height: 0.5rem;
}
.paytext1 {
  height: 0.5rem;
  color: #000;
  font-size: 0.4rem;
}
.tabmoney {
  background: #f11730;
  text-align: center;
  font-size: 0.4rem;
  color: #fff;
}
.gou {
  position: absolute;
  width: 0.4rem;
  height: 0.28rem;
  top: 1rem;
  right: 1rem;
}
.discountselect {
  margin-top: 0.3rem;
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.4rem;
  color: #000;
}
.showdiscountbox {
  padding: 0;
}
.discontbox {
  background: #f8f8f8;
  padding-bottom: 1.8rem;
  font-size: 0.3rem;
}
.disbox {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 0.1rem;
  // box-shadow:0rem 0.001rem 0.1rem 0rem #919191;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 0.4rem;
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 0.3rem;
  padding-bottom: 0.4rem;
  .disleft {
    margin-left: 0.5rem;
  }
  .disright {
    margin-right: 0.5rem;
  }
  .dismoney {
    color: #f44;
    font-size: 0.6rem;
  }
  .distit {
    font-size: 0.5rem;
  }
}
.dishr {
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-size: 0.5rem;
  padding: 0.3rem;
  border-bottom: 0.1rem solid #f44;
  border-bottom-left-radius: 0.1rem;
  border-bottom-right-radius: 0.1rem;
}
.closedisbox {
  text-align: center;
  background: #fff;
  font-size: 0.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  border-top: 1px solid #e9e9e9;
}
.checkdisimgbox {
  position: absolute;
  right: 1rem;
  width: 0.55rem;
  height: 0.55rem;
  .checkdisimg {
    width: 100%;
    height: 100%;
  }
}
.adsbox {
  max-height: 7.5rem;
  overflow: auto;
}

.checkmydis {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.3rem;
  line-height: 1.3rem;
  color: #fff;
  text-align: center;
  background: #ff9910;
  margin: 0 auto;
}

.tit{
  width: 90%;
  margin: 0 auto;
  text-align: right;
}
</style>